<template>
  <div class="app-container">
    <!--搜索区域-->
    <el-form size="mini" :inline="true" :model="searchForm">
      <el-form-item>
        <el-input v-model="searchForm.username" placeholder="角色" @keyup.enter.native="searchHandle" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" :loading="searchLoading" @click="searchHandle">查询
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" icon="el-icon-plus" @click="insertHandle()">添加</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" icon="el-icon-delete" @click="deleteHandle()" :disabled="multipleSelection.length === 0">删除</el-button>
      </el-form-item>
    </el-form>
    <!--数据表格-->
    <el-table v-loading="listLoading" element-loading-text="加载中，请稍后..." size="mini" border fit highlight-current-row :data="permissionList" @selection-change="selectionChangeHandle" row-key="id">
      <el-table-column prop="id" type="selection" fixed />
      <el-table-column label="权限名称" prop="name" />
      <el-table-column label="权限标识" prop="uri" />
      <el-table-column label="路由地址" prop="router" />
      <el-table-column label="权限图标" prop="icon" />
      <el-table-column label="权限类型" prop="type">
        <template slot-scope="scope">
          <el-tag size="mini" :type="scope.row.type | typeFilter">
            {{ scope.row.type | typeTextFilter }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="权限父ID" prop="parentId" />
      <el-table-column label="创建时间" align="center" width="150" :formatter="createTimeFormatHandle"/>
      <el-table-column label="更新时间" align="center" width="150" :formatter="updateTimeFormatHandle"/>
      <el-table-column label="操作" fixed="right" align="center" width="150">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="updateHandle(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="deleteHandle(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加权限 -->
    <permission-insert :visible.sync="insertVisible" @reloadTable="searchHandle"/>
    <!-- 更新权限 -->
    <permission-update :visible.sync="updateVisible" :row-data="rowData" @reloadTable="searchHandle"/>
  </div>
</template>

<script>
  import PermissionInsert from './components/permission-insert'
  import PermissionUpdate from './components/permission-update'
  import { parseTime } from '@/utils/CliUtils'

  export default {
    components: {
      'permission-insert': PermissionInsert,
      'permissionUpdate': PermissionUpdate
    },
    filters: {
      typeFilter(type) {
        const typeMap = { 0: 'success', 1: 'gray', 2: 'warning' }
        return typeMap[type]
      },
      typeTextFilter(type) {
        const typeTextMap = { 0: '目录', 1: '菜单', 2: '按钮' }
        return typeTextMap[type]
      }
    },
    data() {
      return {
        permissionList: [],
        listLoading: true,
        searchForm: {
          name: '',
        },
        searchLoading: false,
        multipleSelection: [],
        // 子组件使用
        insertVisible: false,
        updateVisible: false,
        rowData: null
      }
    },
    created() {
      this.listHandle()
    },
    methods: {
      /**
       * 查询所有权限
       */
      listHandle() {
        this.listLoading = true
        this.AjaxUtils.get('/permission/listPermission', this.searchForm).then((response) => {
          this.listLoading = false
          this.searchLoading = false
          // 表格数据
          this.permissionList = response.data
          // 数据总条数
          this.searchForm.total = response.total
        }).catch(() => {
          this.listLoading = false
          this.searchLoading = false
        })
      },
      /**
       * Table组件格式化创建时间
       * @param row
       * @returns {*}
       */
      createTimeFormatHandle(row) {
        return parseTime(new Date(row.createTime))
      },
      /**
       * Table组件格式化更新时间
       * @param row
       * @returns {*}
       */
      updateTimeFormatHandle(row) {
        return parseTime(new Date(row.updateTime))
      },
      /**
       * 模糊搜索权限
       */
      searchHandle() {
        this.searchLoading = true
        this.listHandle()
      },
      /**
       * Table组件多选时
       * @param val
       */
      selectionChangeHandle(val) {
        this.multipleSelection = val
      },
      /**
       * 显示添加权限子组件
       */
      insertHandle() {
        this.insertVisible = true
      },
      /**
       * 显示更新权限子组件
       * @param row
       */
      updateHandle(row) {
        this.updateVisible = true
        this.rowData = row
      },
      /**
       * 删除权限
       * @param row
       */
      deleteHandle(row) {
        console.log(this.multipleSelection)
        this.ComponentUtils.confirm().then(() => {
          console.log(`要删除的id为${row.id}`)
        }).catch(() => {
        })
      }
    }
  }
</script>
